<script setup>

import Upper from "./components/Upper.vue";
import {ref} from "vue";
import Downer from "./components/Downer.vue";

let showIcon = ref(false)
let showAddData = ref(false)
let filepath = ref("")
let oneDirOrFile = ref("")
let windowOrConsole = ref("")
let icon = ref("")
let iconShowInInput = ref("")
let command = ref(`pyinstaller --noconfirm ""`)

function changeCommand() {
  command.value = `pyinstaller --noconfirm ${oneDirOrFile.value} ${windowOrConsole.value} ${icon.value} "${filepath.value}"`

}

function changeOneDirOrFile(data) {
  oneDirOrFile.value = data
  changeCommand()
}

function changeWindowOrConsole(data) {
  windowOrConsole.value = data
  changeCommand()
}

async function open_python_file_dialog() {
  let fp = await window.pywebview.api.open_python_file_dialog()
  if (fp) {
    filepath.value = fp
    changeCommand()
  }

}

async function open_icon_file_dialog() {
  let ic = await window.pywebview.api.open_icon_file_dialog()
  if (ic) {
    icon.value = `--icon ${ic}`
    iconShowInInput.value = ic
    changeCommand()
  }
}
</script>

<template>
  <div class="container">
    <div class="logo-container">
      <img src="./assets/favicon.ico" alt="py"/>
      <h1>Pyinstaller可视化</h1>
    </div>
    <div class="core-container">
      <div>
        <h3>脚本路径</h3>
        <div class="file-input-container">
          <fluent-text-field appearance="outline" placeholder="请选择脚本路径"
                             :current-value=filepath></fluent-text-field>
          <fluent-button appearance="accent" @click="open_python_file_dialog()">浏览</fluent-button>
        </div>
      </div>
      <div>
        <h3>单文件/单目录<span class="code-span">(--onedir / --onefile)</span></h3>
        <fluent-radio-group orientation="vertical">
          <fluent-radio value="onefile" @click="changeOneDirOrFile(`--onefile`)">单文件</fluent-radio>
          <fluent-radio value="onedir" @click="changeOneDirOrFile(`--onedir`)">单目录</fluent-radio>
        </fluent-radio-group>
      </div>

      <div>
        <h3>窗口/控制台<span class="code-span">(--console / --windowed)</span></h3>
        <fluent-radio-group orientation="vertical">
          <fluent-radio value="windowed" @click="changeWindowOrConsole(`--windowed`)">基于窗口</fluent-radio>
          <fluent-radio value="console" @click="changeWindowOrConsole(`--console`)">基于控制台</fluent-radio>
        </fluent-radio-group>
      </div>

      <div>
        <div style="display: flex;align-items: center">
          <upper v-if="showIcon" @click="showIcon=!showIcon"/>
          <downer v-else @click="showIcon=!showIcon"/>
          <h3>应用程序图标<span class="code-span">(--icon)</span></h3>
        </div>
        <div v-show="showIcon" class="file-input-container">
          <fluent-text-field appearance="outline" placeholder="请选择图标路径"
                             :current-value="iconShowInInput"></fluent-text-field>
          <fluent-button appearance="accent" @click="open_icon_file_dialog()">浏览</fluent-button>
        </div>
      </div>

      <div>
        <div style="display: flex;align-items: center">
          <upper v-if="showAddData" @click="showAddData=!showAddData"/>
          <downer v-else @click="showAddData=!showAddData"/>
          <h3>附加文件<span class="code-span">(--add-data)</span></h3>
        </div>
      </div>

    </div>

    <div>
      <h3>当前命令</h3>
      <fluent-text-area :current-value=command></fluent-text-area>
    </div>
  </div>
</template>

<style scoped>
.code-span {
  font-family: 'Times New Roman', serif;
  font-size: 18px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-container > h1 {
  font-size: 32px;
  text-indent: 1rem;
  display: flex;
  align-items: center;
}

.file-input-container {
  display: flex;
  align-items: center;
}

fluent-text-field {
  width: 100%;
}

fluent-button {
  width: 100px;
  margin-left: 10px;
}

fluent-radio {
  padding: 5px 0;
}

fluent-text-area {
  width: 100%;
}
</style>
